@extends('admin.master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" type="text/css" href="/css/ga-embed.css">
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <link href="/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="/js/fileinput.min.js"></script>
    <script src="/js/locales/zh.js"></script>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-list"></i>@if (empty($id)) 添加@else 编辑@endif首页楼盘
    </h1>
@stop

<style>
    .unit {
        display: inline;
    }

    .form-inline label {
        font-weight: bold;
    }

    .form-inline select, .form-inline input {
        margin-top: 8px;
    }

    .image-box {
        display: inline-block;
        width: 120px;
        height: 80px;
        margin-right: 10px;
        position: relative;
    }

    .image-box img {
        width: 100%;
        height: 100%;
    }

    .image-box i {
        position: absolute;
        top: 5px;
        right: 5px;
        color: red;
        font-size: 18px;
        cursor: pointer;
    }
</style>
@section('content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered">

                    <div class="panel-heading">
                        <h3 class="panel-title">@if (empty($id)) 添加@else 编辑@endif首页楼盘
                            <small style="color:red">（*为必填项）</small>
                        </h3>
                    </div>

                    <form role="form" action="{{ route('admin.home_estate.post_add') }}" method="post"
                          class="form-horizontal">

                        {{ csrf_field() }}
                        @if(!empty($id))
                            <input type="hidden" value="{{ $id }}" name="id"/>
                        @endif

                        <div class="panel-body">

                            <div class="form-inline col-sm-4">
                                <label class=" control-label">
                                    <small style="color:red">*</small>
                                    省份</label>
                                <select onchange="changeProvince();" name="province" id="province"
                                        class="form-control">
                                    <option value="null" selected="selected">--请选择省份--</option>
                                    @foreach($provinces as $province)
                                        <option value="{{$province['address']}}"
                                                @if(!empty($id)&&$home_estate['province']==$province['address'])selected="selected"@endif >{{$province['address']}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-inline col-sm-4">
                                <label class="control-label">
                                    <small style="color:red">*</small>
                                    城市</label>
                                <select onchange="changeCity();" name="city" id="city" class="form-control">
                                    <option value="null" selected="selected">--请选择城市--</option>
                                    @if(!empty(!empty($id)))
                                        @foreach($citys as $city)
                                            <option value="{{$city['id']}}"
                                                    @if($home_estate['city']==$city['city'])selected="selected"@endif >{{$city['city']}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-inline col-sm-4">
                                <label class="control-label">
                                    <small style="color:red">*</small>
                                    区域</label>
                                <select name="district" id="district" class="form-control">
                                    <option value="null" selected="selected">--请选择区域--</option>
                                    @if(!empty(!empty($id)))
                                        @foreach($districts as $district)
                                            <option value="{{$district['id']}}"
                                                    @if($home_estate['district']==$district['district'])selected="selected"@endif >{{$district['district']}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-inline col-sm-4" style="margin-top:20px;">
                                <label class="control-label">
                                    <small style="color:red">*</small>
                                    街道</label>
                                <input type="text" placeholder="街道" name="street" id="street"
                                       class="form-control"
                                       @if(!empty($id))value="{{$home_estate['street']}}"@endif/>
                            </div>
                            <div class="form-inline col-sm-4" style="margin-top:20px;">
                                <label class="control-label">
                                    <small style="color:red">*</small>
                                    房源类型</label>
                                <select name="type" id="type" class="form-control">
                                    <option value="写字楼"
                                            @if(!empty($id)&&$home_estate['type']=='写字楼')selected="selected"@endif>写字楼
                                    </option>
                                    <option value="旺铺"
                                            @if(!empty($id)&&$home_estate['type']=='旺铺')selected="selected"@endif>旺铺
                                    </option>
                                    <option value="厂房"
                                            @if(!empty($id)&&$home_estate['type']=='厂房')selected="selected"@endif>厂房
                                    </option>
                                </select>
                            </div>
                            <div class="form-inline col-sm-4" style="margin-top:20px;">
                                <label class="control-label">
                                    <small style="color:red">*</small>
                                    楼盘名</label>
                                <input type="text" placeholder="楼盘名" name="name" id="name"
                                       class="form-control"
                                       @if(!empty($id))value="{{$home_estate['name']}}"@endif/>
                            </div>
                            <div class="form-inline col-sm-4" style="margin-top:20px;width:26%">
                                <label class="control-label">
                                    <small style="color:red">*</small>
                                    楼盘价格</label>
                                <input type="text" placeholder="楼盘价格" name="price" id="price"
                                       class="form-control"
                                       @if(!empty($id))value="{{$home_estate['price']}}"@endif/>
                            </div>
                            <div class="form-inline col-sm-1" style="margin-top:20px;">
                                <select name="unit" id="unit" class="form-control">
                                    <option value="元/㎡/月" @if(!empty($id)&&$home_estate['unit']=='元/㎡/月')selected="selected"@endif>元/㎡/月</option>
                                    <option value="元/㎡/天" @if(!empty($id)&&$home_estate['unit']=='元/㎡/天')selected="selected"@endif>元/㎡/天</option>
                                </select>
                            </div>
                        </div>
                        <div class="panel-body">
                            @if (!empty($id)&&!empty($home_estate['image']))
                                <div class="form-group" style="margin-left:18px">
                                    <label class="" style="font-weight:bold;margin-right:10px;">
                                        已上传的图片</label>
                                    <div class="" style="display:inline">
                                        @foreach ($home_estate['image'] as $key=>$image)
                                            <div class="image-box">
                                                <img src="/storage/estate/{{$image}}">
                                                <i id="del_img" class="glyphicon glyphicon-trash text-danger del_img"
                                                   image="{{$image}}" alt="删除图片"></i>
                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            @endif
                            <div class="form-group" style="margin-left:18px;clear:both;">
                                <label class="" style="font-weight:bold;margin-top:20px;">
                                    <small style="color:red">*</small>
                                    首页楼盘图片
                                    <small style="color:red">(上传一张楼盘图片,建议尺寸800*500px)</small>
                                </label>
                                <input id="upload_img" name="images" type="file" class="file-loading"
                                       accept="image/gif,image/jpeg,image/jpg,image/png">
                                <input id="pic_name" name="estate_images" type="hidden" value="">
                            </div>
                            <div class="">
                                <button type="submit" style="width:50%;margin:0px auto;" onclick="return check();"
                                        class="btn btn-info btn-block">@if (empty($id)) 添加　@else 编辑 @endif</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@stop
@section('javascript')
    <script>
        $(document).ready(function () {
            $(".del_img").each(function (index) {
                $(this).click(function () {
                    $.ajaxSetup({
                        headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}
                    });
                    var bool = confirm("确认删除该图片吗");
                    if (bool) {
                        $.ajax({
                            url: "{{route('admin.home_estate.remove_img')}}",
                            type: 'POST',
                            data: {
                                'image': $(this).attr('image'),
                                'id': '@if(!empty($id)){{$home_estate['id']}}@endif',
                            },
                            dataType: 'json',
                            success: function (response) {
                                toastr.success(response['msg']);
                                window.location.reload();
                            },
                            error: function () {
                                alert("error");
                            }

                        })
                    }
                })

            });
        });

        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}
        });
        $("#upload_img").fileinput({
            language: 'zh', //设置语言
            initialPreviewAsData: true,
            deleteUrl: "/home_estate/remove_img",
            uploadUrl: "/home_estate/upload_img",
            uploadClass: "btn btn-success",
            overwriteInitial: true,
            initialCaption: "点击右边按钮开始上传",
            uploadAsync: false,
        });
        $('#upload_img').on('filebatchuploadsuccess', function (event, data, previewId, index) {
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            var pic_name = response['pic_name'];
            var pic_name_old = $('#pic_name').val();

            if (pic_name_old == null || pic_name_old == '') {
                $('#pic_name').val(pic_name);
            } else {
                var pic_name_new = pic_name_old + "," + pic_name;
                $('#pic_name').val(pic_name_new);
            }
        });
        function check() {
            var province = $("#province").val();
            if (province.trim() == "") {
                toastr.error("省份不能为空");
                return false;
            }

            var city = $("#city").val();
            if (city.trim() == "") {
                toastr.error("城市不能为空");
                return false;
            }

            var district = $("#district").val();
            if (district.trim() == "") {
                toastr.error("区域不能为空");
                return false;
            }
            var street = $("#street").val();
            if (street.trim() == "") {
                toastr.error("街道不能为空");
                return false;
            }
            var price = $("#price").val();
            if (price.trim() == "") {
                toastr.error("价格不能为空");
                return false;
            }

            var name = $("#name").val();
            if (name.trim() == '') {
                toastr.error("楼盘名不能为空");
                return false;
            }
            var pic_name = $("#pic_name").val();
            @if (empty($id))
            if (pic_name.trim() == '') {
                toastr.error("请上传一张首页楼盘图片");
                return false;
            }
            @endif

        }

        function changeProvince() {
            var url = "{{ route('admin.estate.get_city_by_province') }}";
            var province = $("#province").val();

            $("#district option").each(function () {
                if ($(this).val() != 'null') {
                    $(this).remove();
                }
            });

            $.ajax({
                url: url,
                data: {'province': province},
                type: "GET",
                dataType: "JSON",
                async: true,
                success: function (datas) {
                    $("#city option").each(function () {
                        if ($(this).val() != 'null') {
                            $(this).remove();
                        }
                    });
                    datas.forEach(function (data) {
                        str = "<option value='" + data.id + "'>" + data.city + "</option>";
                        $("#city").append(str);
                    });
                }
            });
        }

        function changeCity() {
            var url = "{{route('admin.estate.get_district_by_city')}}";
            var city = $("#city").val();

            $.ajax({
                url: url,
                data: {'city': city},
                type: "GET",
                dataType: "JSON",
                async: true,
                success: function (datas) {
                    $("#district option").each(function () {
                        if ($(this).val() != 'null') {
                            $(this).remove();
                        }
                    });
                    datas.forEach(function (data) {
                        str = "<option value='" + data.id + "'>" + data.district + "</option>";
                        $("#district").append(str);
                    });
                }
            });
        }
    </script>
@stop
